import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Article from '@/views/article'
import List from '@/views/list'
import Register from '@/views/register'
import User from '@/views/user'
import NotFound from '@/views/404.vue'

// router  路由的全局最大的一个实例，唯一的
// routes  路由规则列表 
// route   一条路由规则 
Vue.use(VueRouter)

const router = new VueRouter({
    // 路由模式 两种
    // 1. hash模式 ==> # 
    // 2. history模式  ===> /不带#号 
    //  （如果改成了history模式，以后上下后端需要配置一些东西） 

    // 后端如果不会，把vue文档丢给他，来，我教你~~~ 

    mode:'history',
    routes:[
        // redirect后跟的是一个路径
        // 当一进入页面，匹配到/的时候，重定向到/login
        {path:'/', redirect:'/login'},
        // 简写成单个单词，只是方便我们使用，一般情况下多单词
        {path:'/login', component:Login},
        {path:'/article', component:Article},
        {path:'/list', component:List, name:'list'},
        {path:'/register', component:Register},
        // url地址上输入==>  /user/007
        // 如果要传多个参数，最好建议 先写一个自定义的名字再写动态key
        // /user/:id  :id可以动态的设置 
        {path:'/user/:id/color/:color', component:User},

        // 路由优先级：路由定义得越早，优先级就越高。
        // 含有通配符的路由应该放在最后
        // 404配置，一般在路由规则的最后一行配置
        {path:'*', component:NotFound}
    ]  
})

export default router
